<script setup>
import { reactive, onMounted } from 'vue';
import MarkdownIt from 'markdown-it'
import mdKatex from '@traptitech/markdown-it-katex'
import hljs from 'highlight.js';
 
const mdi = new MarkdownIt({
  linkify: true,
  highlight(code, language) {
    const validLang = !!(language && hljs.getLanguage(language))
    if (validLang) {
      const lang = language ?? ''
      return highlightBlock(hljs.highlight(lang, code, true).value, lang)
    }
    return highlightBlock(hljs.highlightAuto(code).value, '')
  }
})
mdi.use(mdKatex, { blockClass: 'katexmath-block rounded-md p-[10px]', errorColor: ' #cc0000' })
 
function highlightBlock(str, lang) {
  return `<pre class="pre-code-box"><div class="biao pre-code-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">复制代码</span></div><div class="pre-code"><code class="hljs code-block-body ${lang}">${str}</code></div></pre>`
}
 
const getMdiText = (value) => {
    return mdi.render(value)
}
function getLastTextNode(dom){
  const childNodes = dom.childNodes
  if (childNodes.length === 0){
    return null
  }
  for (let i = childNodes.length - 1; i >= 0; i--) {
    const node = childNodes[i]
    if (node.nodeType === Node.TEXT_NODE&&/\S/.test(node.nodeValue)) {
      node.nodeValue = node.nodeValue.replace(/\s+/g, ' ')
      return node
    }else if(node.nodeType === Node.ELEMENT_NODE){
      const last = getLastTextNode(node)
      if (last){
        return last
      }
    }
  }
  return null
}
const state = reactive({
    htmlStr: '' 
})
let pos = reactive({
  x: 0,
  y: 0
})
onMounted(() => {
    let s = "##1.\n你好！！！！！\n```python\nimport re\na=100\nb=1000\n```\n1111\n```java\nint a=100\n```"
    let k = ""
    let i = 0
    let y = setInterval(()=>{
        if (i>=s.length
        -1){
          let doms = document.querySelector(".aaaaa")
          doms.remove()
          clearInterval(y)

        }
        k += s[i]
        i++
        state.htmlStr = getMdiText(k) //htmlStr就是已经包含html样式的文本
        let dome = document.querySelector(".main");
        if (dome){
          const lastText = getLastTextNode(dome)
          console.log(lastText);
          const textNode = document.createTextNode('\u200b')
          if(lastText){
            lastText.parentElement.appendChild(textNode)
          }else{
            dome.appendChild(textNode)
          }
          const domRect = dome.getBoundingClientRect()
          const rang = document.createRange()
          rang.setStart(textNode, 0)
          rang.setEnd(textNode, 0)
          const rect = rang.getBoundingClientRect()
          pos.x = (rect.left - domRect.left)
          pos.y = (rect.top - domRect.top) - 5
          console.log(pos);
          textNode.remove()
        }
    },50)
    
});
function copy(e){
  
  console.log(e.target.innerText);
  if (e.target.innerText === "复制代码"){
    //实现复制功能
    console.log(e.target.parentElement.parentElement.childNodes[1].innerText);
    let text = e.target.parentElement.parentElement.childNodes[1].innerText
    let input = document.createElement("textarea")
    input.value = text
    document.body.appendChild(input)
    input.select()
    document.execCommand("Copy")
    input.remove()
    e.target.innerText = "复制成功"
    setTimeout(()=>{
      e.target.innerText = "复制代码"
    },500)

  }
}
</script>
<template>
  <div class="main" @click="copy">
    <div class="aaaaa"></div>
    <div v-html="state.htmlStr"></div>
  </div>
</template>
<style  scoped>
.main{
  position: relative;
}
.aaaaa:after{
  content: '█';
  color: aliceblue;
  animation: blink 0.5s infinite;
  position: absolute;
  left: calc(v-bind('pos.x')*1px);
  top: calc(v-bind('pos.y')*1px);
}
/* 让.aaaaa添加一个闪烁动画 */
@keyframes blink{
  50%{
    opacity: 0;
  }
}
::v-deep .pre-code-header{
  background-color: rgb(39, 39, 39);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  display: flex;
  justify-content: space-between;
  padding-left: 10px;
  padding-right: 10px;
  
}
::v-deep .code-block-header__lang{
  font-weight: 700;
  color: #fff;
}
::v-deep .code-block-header__copy{
  font-weight: 700;
  color: #fff;
}
::v-deep .hljs{
  background-color: black;
}
::v-deep .code-block-header__copy:hover{
  cursor: pointer;
}
</style>
